<template>
  <div class="list">
    <ul>
      <li class="item"
          v-for="(item,index) of categoryList"
          :key="index">
        <span class="mp-ticketype-ticket"></span>{{item.title}}
        <div v-show="item.children">
          <detail-list :categoryList="item.children"></detail-list>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'DetailList',
  props: {
    categoryList: Array
  }
}
</script>
<style lang="stylus" scoped>
.list
  padding: 0.1rem
  .item
    line-height: 0.6rem
    position: relative
    padding-left: 0.6rem
    padding-top: 0.13rem
    .mp-ticketype-ticket
      display: inline-block
      position: absolute
      width: 0.36rem
      height: 0.36rem
      top: 0.26rem
      left: 0.2rem
      background: url('http://s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -0.45rem no-repeat // s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
      margin-right: 0.1rem
      background-size: 0.4rem 3rem
</style>
